<template>
    <div class=" bg-white flex pt-16px pb-16px">
        <div class="w-262px px-16px rounded-8px set-height">
            <template v-if="list.length">
                <template v-for="(i, index) in list" :key="index">
                    <membershipCard class="mb-16px cursor-pointer" :card-info="i" :is-active="active === i.id" @click="onChangeCard(i.id, i.status)" />
                </template>

                <div class="w-178px h-42px bg-white rounded-8px shadow-xl flex justify-center items-center cursor-pointer sticky bottom-100px z-10 mx-auto">
                    <div class="w-24px h-24px rounded-full bg-#E6F0FC flex justify-center items-center mr-8px">
                        <el-icon color="#3e5ff5">
                            <Plus />
                        </el-icon>
                    </div>
                    <div class="text-primary text-lg">创建会员卡</div>
                </div>
            </template>
            <template v-else>
                <div class="w-full h-120px bg-white rounded-8px shadow-xl flex justify-center items-center cursor-pointer">
                    <div class="w-24px h-24px rounded-full bg-#E6F0FC flex justify-center items-center mr-8px">
                        <el-icon color="#3e5ff5">
                            <Plus />
                        </el-icon>
                    </div>
                    <div class="text-primary text-lg">创建会员卡</div>
                </div>
            </template>
        </div>
        <div class="bg-#F6F7FB rounded-8px flex-1 p-16px">
            <membershipRights :card-id="active" :status="status"/>
        </div>
    </div>
</template>

<script setup lang='ts'>
import membershipCard from './components/membershipCard.vue'
// import membershipData from './components/membership-data.vue'
import membershipRights from './components/membershipRights.vue'
import { getCardList } from '@/api/membership'
import type { MemberCardDto } from '@/api/membership/type'

import { onMounted, ref } from 'vue'

const list = ref<MemberCardDto[]>([] as MemberCardDto[])

const active = ref<number>(0)
const status = ref<number | undefined>()

/**
 * @description 获取会员卡列表
 */
const getData  = async () => {
    const res = await getCardList()
    list.value = res
    if(res?.length) {
        active.value = res[0].id
        status.value = res[0].status
    }
}

/**
 * @description 切换卡片状态
 * @param id 卡片ID
 * @param state 卡片状态
 */
const onChangeCard = (id: number, state: number) => {
    active.value = id
    status.value = state
}

onMounted(() => {
    getData()
})

</script>

<style scoped lang="scss">
.set-height {
    height: calc(100vh - 170px);
    overflow: auto;
}
</style>